<script setup>

    import { ref,defineProps, defineEmits } from 'vue';

    import BookDetail from "@/components/BookDetail.vue";

    // Book.vue 是父组件       通过属性   :xxx=data
    // BookList.vue   是子组件     defineProps 来获取 xxx 传递过来的数据
    //获取页面的数据 (Book 页面发送过来的数据 )
    const props = defineProps({
        bookList: {  //籍列表 要显示的书
            type: Array,    //数据类型
            required: true, //是否必须
        },
        currentPage:{
            type:Number,
            required:true
        },
        pageSize:{
            type:Number,
            required:true
        },
        totalItems:{
            type:Number,
            required:true
        }
    })

    const emits = defineEmits('change-page');

    //点击切换 下一页 把数据发送到 book.vue 页面
    const handleCurrentChange=(pageNum)=>{
        //把pageNum 发送到 父组件中
        emits("change-page",pageNum);
    }

    const bookId = ref();
    const dialogVisible = ref(false);

    const showDetail = (id)=>{
        console.log("id==>",id)
        bookId.value = id;   //书籍的id
        dialogVisible.value =true  //是否显示
        console.log("showDetail")
    }

    const handlerClose=(val)=>{
        //把 dialogVisible改为 false
        dialogVisible.value = val;
    }

</script>

<template>
    <div>
        <!-- gutter：设置每个列之间间隔 -->
        <el-row :gutter="20">
            <!-- 每行显示6个 -->
            <el-col :span="4" v-for="book in bookList" :key="book.id" style="margin-bottom: 25px;">
                <!-- 鼠标移上才显示阴影 -->
                <el-card :body-style="{ padding: '8px' }" shadow="hover" >
                    <!-- 按钮上显示图片，按钮可以点击 -->
                    <el-image style="width: 100%; height: 200px;"
                              :src="$urlImage + book.imgSrc" fit="fill" @click="showDetail(book.id)"/>
                    <!-- 显示书籍信息-->
                    <div class="book-info">
                        <el-popover trigger="hover">
                            <template #reference>
                                <div style="margin-bottom: 5px; font-weight: bold;">
                                    书名：{{ book.name }}</div>
                            </template>
                            <div v-html="book.name"></div>
                        </el-popover>

                        <div style="margin-bottom: 5px; color: #666;">价格：&yen;{{ book.price }}</div>

                        <el-popover trigger="hover">
                            <template #reference>
                                <div style="color: #666;">作者：{{ book.author }}</div>
                            </template>
                            <div v-html="book.author"></div>
                        </el-popover>
                        <div>销量：{{ book.buyCount }}</div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24" style="text-align: center">
                <!-- 分页组件 -->
                <el-pagination background layout="prev, pager, next, jumper"
                               :current-page="currentPage"
                               :page-size="pageSize"
                               :total="totalItems"
                               @current-change="handleCurrentChange">
                </el-pagination>
            </el-col>
        </el-row>

        <BookDetail :bookId="bookId" :dialogVisible="dialogVisible" @close="handlerClose">
        </BookDetail>

    </div>
</template>

<style scoped>
    /* 主容器的背景和内边距 */
    div {
        background-color: #f9f9f9; /* 浅灰色背景 */
        padding: 5px;
    }

    /* 书籍信息区域 */
    .book-info {
        padding: 5px; /* 调整内边距 */
        font-size: 14px; /* 字体大小 */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 200px; /* 最大宽度 */
        transition: all 0.3s ease; /* 添加过渡效果 */
    }

    /* 每本书卡片 */
    .el-card {
        transition: box-shadow 0.3s ease; /* 添加过渡效果 */
    }

    /* 鼠标悬停时添加阴影 */
    .el-card:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* 更显著的阴影效果 */
    }

    /* 书名、价格、作者、销量样式 */
    .book-info div {
        margin: 3px 0; /* 上下间距减小 */
        color: #333; /* 深色文字 */
    }

    /* 分页样式 */
    .el-pagination {
        margin-top: 20px; /* 顶部间距 */
    }

    /* 分页按钮的自定义样式 */
    .el-pagination .el-button {
        background-color: #409EFF; /* 主色调 */
        color: white; /* 文字颜色 */
    }

    /* 分页按钮悬停效果 */
    .el-pagination .el-button:hover {
        background-color: #66b1ff; /* 悬停时颜色变化 */
        color: white;
    }

    /* 图片样式 */
    .el-image {
        border-radius: 8px; /* 圆角效果 */
        overflow: hidden; /* 防止超出 */
    }

</style>